<template>
  <view class="content">
    <view class="header">
      <image class="bg" src="https://ainengli.meilianshuke.com/jkhx/loginBg.png" />
      <text class="title">欢迎登录</text>
      <text class="nickname">专业守护，为您的健康保驾护航</text>
    </view>
    <view class="form">
      <view class="item">
        <text class="name">手机号</text>
        <input class="input" type="tel" v-model="formState.loginId" placeholder="请输入手机号" />
      </view>
      <view class="item itemCode">
        <text class="name">验证码</text>
        <input
          class="input"
          maxlength="6"
          type="Number"
          v-model="formState.verifyCode"
          placeholder="请输入验证码"
        />
        <view class="send" :class="{ on: code.interval }" @tap="onCaptcha">{{
          code.interval ? `重新获取(${code.time})` : '发送验证码'
        }}</view>
      </view>
    </view>
    <view class="btn">
      <text class="login" @tap="login">登录/注册</text>
      <!-- <text @tap="quit" class="register">暂不登录/注册</text> -->
    </view>
    <!--    <view class="protocol">
      <image v-if="state.showPopover" @tap="readFun" class="img" src="@/static/image/hmm/2.png" />
      <image v-else @tap="readFun" class="img" src="@/static/image/hmm/3.png" />
      <text class="agree" @tap="readFun">我已阅读并同意</text>
      <text class="protocolTitle" @tap="protocolFun">《健康管理服务条款》</text>
      <text class="privacy" @tap="privacyFun">《隐私协议》</text>
    </view> -->
    <!-- <up-modal
      :show="state.showPopup"
      :title="state.title"
      :closeOnClickOverlay="true"
      :showConfirmButton="false"
      @close="close"
      class="modalWrap"
    >
      <view class="modal">
        <view class="title">用户隐私保护提示</view>
        <view class="modalContent">
          在您使用健康画像服务之前，请仔细阅读《健康画像小程序隐私保护指引》如你同意该指引，请点击“同意”开始使用本小程序。
        </view>
        <view class="agree" @tap="agree">同意</view>
        <view class="refuse" @tap="close">拒绝</view>
      </view>
    </up-modal> -->
  </view>
</template>
<script setup lang="ts">
import { reactive, ref } from 'vue'
import { register, getVerifyCode } from '@/api/index'
import { onLoad, onUnload, onShow } from '@dcloudio/uni-app'
import { throttle } from '@/utils/tools'
import store from '@/store'
import type { register_params } from '@/api/index.type'
import { queryImAccout } from '@/api/im'

const formState = reactive<register_params>({
  loginId: '',
  verifyCode: '',
  verifyKey: ''
})

const code = reactive({
  loading: false,
  time: 60,
  interval: null
})

const onCaptcha = () => {
  if (code.interval) {
    return
  }
  if (!formState.loginId) {
    uni.showToast({
      title: '请输入手机号',
      icon: 'none',
      duration: 2000
    })
    return
  }
  const reg = new RegExp(/^[1][3,4,5,7,8,9][0-9]{9}$/)
  if (!reg.test(formState.loginId)) {
    uni.showToast({
      title: '请输入正确的手机号',
      icon: 'none',
      duration: 2000
    })
    return
  }
  code.loading = true
  getVerifyCode({
    phoneNo: formState.loginId,
    scene: 2
  })
    .then((res) => {
      console.log(res)
      if (res.code === 0) {
        uni.showToast({
          title: '验证码发送成功',
          icon: 'none',
          duration: 2000
        })
        formState.verifyKey = res.data.verifyKey
        if (process.env.NODE_ENV === 'development') {
          formState.verifyCode = '123456'
        }
        code.loading = false
        code.interval = setInterval(() => {
          if (code.time === 1) {
            clearInterval(code.interval)
            code.interval = null
            code.time = 60
          } else {
            code.time--
          }
        }, 1000)
      }
    })
    .catch((err) => {
      code.loading = false
      console.log(err)
    })
}

const login = throttle(() => {
  if (!formState.loginId) {
    uni.showToast({
      title: '请输入手机号',
      icon: 'none',
      duration: 2000
    })
    return
  }
  const reg = new RegExp(/^[1][3,4,5,7,8,9][0-9]{9}$/)
  if (!reg.test(formState.loginId)) {
    uni.showToast({
      title: '请输入正确的手机号',
      icon: 'none',
      duration: 2000
    })
    return
  }
  if (!formState.verifyCode) {
    uni.showToast({
      title: '请输入验证码',
      icon: 'none',
      duration: 2000
    })
    return
  }
  register(formState).then((res) => {
    store.commit('SET_USERINFO', res.data)
    store.commit('setToken', res.data.token)

    queryImAccout().then((data) => {
      dispatch('im/IM_CONNECT', {
        accid: data.accountId,
        token: data.token,
        appId: '85a4d5b702808cb1cd9809be4e1e5847'
      })
    })

    uni.switchTab({
      url: '/pages/im/pages/Conversation/index'
    })
  })
}, 200)
</script>
<style lang="scss" scoped>
.content {
  height: 100vh;
  background: #fff;

  .header {
    position: relative;
    height: 520rpx;

    .bg {
      position: absolute;
      top: 0;
      left: 0;
      z-index: 0;
      width: 100%;
      height: 520rpx;
    }

    .title {
      position: relative;
      z-index: 2;
      display: inline-block;
      margin: 62rpx 48rpx 0;
      font-size: 50rpx;
      font-weight: 700;
      color: #222;
    }

    .nickname {
      position: relative;
      z-index: 2;
      display: block;
      margin: 16rpx 48rpx 0;
      font-size: 28rpx;
      color: #666;
    }
  }

  .form {
    position: relative;
    z-index: 2;
    padding: 48rpx 48rpx 0;
    margin-top: -260rpx;
    background: #fff;
    border-radius: 32rpx;

    .item {
      position: relative;
      border-bottom: 1px solid #e5e6eb;

      .name {
        font-size: 36rpx;
        font-weight: 700;
        color: #222;
      }

      .input {
        height: 112rpx;
        font-size: 32rpx;

        ::v-deep .uni-input-placeholder {
          color: #999;
        }

        ::v-deep .uni-input-input {
          color: #222;
        }
      }

      &.itemCode {
        margin-top: 32rpx;

        .input {
          width: calc(100% - 232rpx);
        }

        .send {
          position: absolute;
          top: 50%;
          right: 0;
          padding: 36rpx 0 36rpx 24rpx;
          font-size: 32rpx;
          color: #00d1b6;
          transform: translateY(-32%);

          &.on {
            color: #999;
          }
        }
      }
    }
  }

  .btn {
    margin: 80rpx 48rpx 0;

    .login {
      display: block;
      height: 96rpx;
      font-size: 32rpx;
      font-weight: bold;
      line-height: 96rpx;
      color: #fff;
      text-align: center;
      background: #00d1b6;
      border-radius: 48rpx;

      &.on {
        opacity: 0.5;
      }
    }

    .register {
      display: block;
      height: 96rpx;
      font-size: 28rpx;
      line-height: 96rpx;
      color: #999;
      text-align: center;
      border-radius: 48rpx;
    }
  }

  .protocol {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    padding-bottom: calc(34rpx + constant(safe-area-inset-bottom));
    padding-bottom: calc(34rpx + env(safe-area-inset-bottom));
    font-size: 24rpx;
    color: #666;
    text-align: center;

    .img {
      display: inline-block;
      width: 40rpx;
      height: 40rpx;
      padding-right: 10rpx;
      vertical-align: middle;
    }

    .agree {
      display: inline-block;
      vertical-align: middle;
    }

    .protocolTitle,
    .privacy {
      display: inline-block;
      vertical-align: middle;
      color: #00d1b6;
    }
  }

  .modal {
    .title {
      font-size: 36rpx;
      font-weight: 700;
      color: #1d2129;
      text-align: center;
    }

    .modalContent {
      margin-top: 16rpx;
      font-size: 30rpx;
      color: #4e5969;
    }

    .agree {
      height: 88rpx;
      margin: 40rpx auto 10rpx;
      font-size: 30rpx;
      line-height: 88rpx;
      color: #fff;
      text-align: center;
      background: #00d1b6;
      border-radius: 44rpx;
    }

    .refuse {
      height: 88rpx;
      font-size: 30rpx;
      line-height: 88rpx;
      color: #86909c;
      text-align: center;
      background: #fff;
      border-radius: 44rpx;
    }
  }
}
</style>
